<template>
  <view class="container">
    <view class="detail-header-panel">
      <view class="panel-top">
        <image
          src="https://www.kimhiz.asia/uploads/test.jpg"
          mode="aspectFill"
          class="panel-img"
        />
        <view class="panel-title"
          >{{ data.name }}
          <uni-tag
            :inverted="true"
            :text="data.category"
            mark
            size="small"
            type="warning"
          />
        </view>
        <view class="panel-rate"
          ><uni-rate
            size="18"
            :readonly="true"
            :value="Number(data.rating)"
          />{{ Number(data.rating) }}</view
        >
      </view>

      <view class="panel-content">
        <view class="price">￥{{ data.price }}/人</view>
        <view class="phone"
          >联系电话：{{ data.phone
          }}<uni-icons
            type="phone-filled"
            color="#fff"
            size="16"
            class="phone-icon"
            @click="callPhone(data.phone)"
          />
        </view>
      </view>
    </view>
    <view class="detail-intro-panel">
      <uni-section title="详细介绍" titleFontSize="16px" type="line">
        <view class="intro">{{ data.introduction }}</view>
      </uni-section>
    </view>
    <view class="toDetail">
      <navigator
        :url="`/pages/detail/detail?id=${data.id}&type=${data.type}`"
        open-type="navigate"
        hover-class="none"
        >查看详情</navigator
      ></view
    >
    <view class="openNav" @tap="openNav"
      ><uni-icons type="arrow-right" color="#fff" size="24" />去这里</view
    >
  </view>
</template>

<script lang="ts" setup>
const props = defineProps({
  // 弹窗标题
  data: {
    type: Object,
    default: {},
  },
  mapContext: {
    type: Object,
    default: {},
  },
});

const callPhone = (phone: string) => {
  uni.makePhoneCall({
    phoneNumber: phone,
  });
};
//  打开导航
const openNav = () => {
  props.mapContext.openMapApp({
    latitude: props.data.latitude,
    longitude: props.data.longitude,
    destination: props.data.name,
  });
};
</script>

<style lang="scss" scoped>
.container {
  background-color: white;

  .detail-header-panel {
    height: auto;
    background-color: white;
    width: 100%;
    // display: flex;

    .panel-top {
      height: 100rpx;
      position: relative;
      border-bottom: 1rpx solid #f5f5f5;
      font-weight: bold;

      .panel-img {
        position: absolute;
        top: -75rpx;
        left: 20rpx;
        border: 10rpx solid #f5f5f5;
        border-radius: 25%;
        width: 150rpx;
        height: 150rpx;
      }
      .panel-title {
        position: absolute;
        top: 20rpx;
        left: 200rpx;
        font-size: 40rpx;
      }
      .panel-rate {
        position: absolute;
        top: 20rpx;
        right: 10rpx;
        font-size: 24rpx;
        color: #555;
        display: flex;
        justify-content: flex-end;
        align-items: center;
      }
    }

    .panel-content {
      box-sizing: border-box;
      padding: 5rpx 10rpx;
      width: 100%;
      height: 60rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #555;
      font-size: 24rpx;
      border-bottom: 1rpx solid #f5f5f5;
      .price {
        font-size: 26rpx;
      }
      .phone {
        .phone-icon {
          margin-left: 10rpx;
          width: 36rpx;
          height: 36rpx;
          text-align: center;
          background-color: #999;
          border-radius: 40%;
        }
      }
    }
  }

  .detail-intro-panel {
    margin-top: 15rpx;

    .intro {
      padding: 10rpx;
      font-size: 26rpx;
    }
  }
  .toDetail {
    border-top: 1rpx solid #f5f5f5;
    margin-top: 15rpx;
    text-align: center;
    padding: 20rpx;
  }
  .openNav {
    position: absolute;
    top: -120rpx;
    right: 20rpx;
    width: 100rpx;
    height: 100rpx;
    box-sizing: border-box;
    background-color: #ffa500;
    padding: 10rpx;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 24rpx;
    box-shadow: 0 0 10rpx #000000aa;
  }
}
</style>
